var Model = (function() {
    class Model {
        constructor() {
            console.log("初始化了")
                // 遮罩
            this.mask = null;
            // 内容面板
            this.panel = null;
            // 关闭按钮
            this.closeBtn = null;
            // 装载关闭按钮的面板
            this.titlePanel = null;
            // 装载内容的面板
            this.contentPanel = null;
            // 内容
            this.content = null;
            // 内容中的文本容器
            this.textContainer = null;

            this.init();
        }

        init() {
            this.render();
            this.setStyle();
            this.bindEvent();
        }

        // 创建结构方法
        render() {
            // 遮罩
            this.mask = document.createElement("div");
            // 内容面板
            this.panel = document.createElement("div");
            // 关闭按钮
            this.closeBtn = document.createElement("span");
            // 装载内容的面板
            this.contentPanel = document.createElement("div");
            // 装载标题的面板
            this.titlePanel = document.createElement("div");
            // 文字内容容器
            this.textContainer = document.createElement("div");
            // 将内容面板装入遮罩
            this.mask.appendChild(this.panel)
                // 将标题面板装入内容面板
            this.panel.appendChild(this.titlePanel);
            // 将关闭按钮装入标题面板
            this.titlePanel.appendChild(this.closeBtn);
            // 将装载内容的面板装入内容面板
            this.panel.appendChild(this.contentPanel);
            // 将装载具体文字的容器放入内容面板
            this.contentPanel.appendChild(this.textContainer);
        }

        // 样式
        setStyle() {
                /* 设置面罩的样式 */
                var obj = {
                    position: "fixed",
                    top: 0,
                    left: 0,
                    right: 0,
                    bottom: 0,
                    backgroundColor: "rgba(0, 0, 0, .3)",
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center"
                }
                for (var i in obj) {
                    this.mask.style[i] = obj[i];
                }

                /* 设置内容面板的样式 */
                var obj = {
                    width: "30%",
                    minHeight: "300px",
                    background: "white",
                    display: "flex",
                    flexDirection: "column"
                }
                for (var i in obj) {
                    this.panel.style[i] = obj[i]
                }



                /* 装载标题的面板 */
                var obj = {
                    height: "10%",
                    maxHeight: "50px",
                    minHeight: "30px",
                    borderBottom: "1px solid #ccc",
                    position: "relative"
                }
                for (var i in obj) {
                    this.titlePanel.style[i] = obj[i];
                }

                /* 装载内容的面板 */
                var obj = {
                    flex: 1,
                    display: "flex",
                    justifyContent: "center",
                    alignItems: "center",
                    padding: "10px",
                    textAlign: "center"
                }
                for (var i in obj) {
                    this.contentPanel.style[i] = obj[i];
                }

                /* 设置关闭按钮的样式 */
                var obj = {
                    width: "30px",
                    height: "30px",
                    position: "absolute",
                    top: 0,
                    right: 0,
                    textAlign: "center",
                    lineHeight: "30px",
                    cursor: "pointer"
                }
                for (var i in obj) {
                    this.closeBtn.style[i] = obj[i];
                }
                this.closeBtn.innerHTML = "&times;"
            }
            // 设置文本内容
        setText(text) {
            this.textContainer.innerHTML = text;
        }

        // 显示方法
        show() {
                document.body.appendChild(this.mask);
                this.mask.style.display = "flex";
            }
            // 隐藏
        hide() {
                // document.body.removeChild(this.mask)
                this.mask.style.display = "none"
            }
            // 绑定事件
        bindEvent() {
            this.closeBtn.onclick = (e) => {
                e.stopPropagation();
                this.hide();
            }

            this.mask.onclick = () => {
                this.hide();
            }
        }
    }
    // 单例
    var model = null;

    return function() {
        // 懒汉式
        if (model) {
            return model;
        }
        model = new Model();
        return model;
    }

})()